<template>
  <div>
    <!--
      title 属性不加冒号 ?
      不加冒号  只需要传递一个字符串类ing
      加冒号 1.识别data 选项中的数据
      2.识别具体的类型
    -->
    <van-nav-bar title="黑马头条-登录" />
    <van-form @submit="onSubmit">
      <!--
        表单区域
        1. v-model 双向绑定 通过一个对象 做绑定
        2. field 组件的name 属性决定将来校验规则通过时产出的数据对象的key 英文
        3. field 组件的rules配置校验规则 数组-> 规则对象
        4. form 组件的submit事件 当所有的校验表单项 通过时才会 触发 参数就是表单对象
       -->
      <van-cell-group inset>
        <van-field
          v-model="form.mobile"
          name="mobile"
          label="用户名"
          placeholder="用户名"
          required
          :rules="[
            {
              required: true,
              message: '请填写手机号',
              trigger: 'onBlur',
            },
            {
              trigger: 'onBlur',
              message: '手机号格式不正确',
              pattern: /^1[3456789]\d{9}$/,
            }
          ]"
        />
        <van-field
          v-model="form.code"
          type="password"
          name="code"
          label="密码"
          placeholder="密码"
          required
          :rules="[
            {
              required: true,
              message: '请填写密码',
              trigger: 'onBlur',
            },
            {
              trigger: 'onBlur',
              message: '密码格式不正确',
              pattern: /^\d{6}$/,
            }
          ]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button
        block
        type="info"
        native-type="submit"
        round >
          提交
        </van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
export default {
  name: 'login-index',
  data () {
    return {
      form: {
        mobile: '13911111115',
        code: '246810'
      }
    }
  },
  methods: {
    async onSubmit (value) {
      // 异步代码完成之后再提示
      await this.$store.dispatch('fetchLogin', value)
      this.$toast('登录成功')
      this.$router.push('/')
    }
  }
}
</script>

<style>

</style>
